<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <div class="indexTitle">项目管理</div>
                    <div class="contentsize">详情</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="addtitle">
                <div>详情</div>
                <div>
                    <el-button type="primary" @click="backForm" class="searchcolor">返回</el-button>
                </div>
            </div>
            <div class="detailcontent">
                <!-- scope.row.beginTime == null ? '' : scope.row.beginTime.trim().split(' ')[0] -->
                <div class="detailitem">项目名称：{{projectdetail.name}}</div>
                <div class="detailitem">项目地址：{{projectdetail.address}}</div>
                <div class="detailitem">开工时间：{{projectdetail.beginTime== null ? '' : projectdetail.beginTime.trim().split(' ')[0]}}</div>
                <div class="detailitem">计划竣工时间：{{projectdetail.completionTime== null ? '' : projectdetail.completionTime.trim().split(' ')[0]}}</div>
                <div class="detailitem">乙方负责人：{{projectdetail.chargenameB}}</div>
                <div class="detailitem">乙方负责人电话：{{projectdetail.phoneB}}</div>
                <div class="detailitem">乙方公司名称：{{projectdetail.company}}</div>
                <div class="detailitem">甲方项目负责人：{{projectdetail.chargenameA}}</div>
                <div class="detailitem">甲方负责人电话：{{projectdetail.phoneA}}</div>
                <div class="detailitem"></div>
            </div>
            <div>附件</div>
            <div style="display:flex;margin-top: 20px;">
                <div style=" text-align: center;margin-right:10px;cursor: pointer;" v-for="(item,index) in projectdetail.fileinfo" :key="index" class="filebox">
                    <img src="../../assets/img/file.png" alt="" style="width:50px;heigh:60px;" @click="downloadfile(item.id,item.name)">
                    <div class="fileboxitem">{{item.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { findProjectById,download} from '@/api/index';
import axios from 'axios'

export default {
    name: 'projectdetail',
    data() {
        return {
            form: {},
            projectdetail:{},
            fileList: []
        };
    },
    methods: {
        // 返回上一页
        backForm() {
            this.$router.go(-1);
        },
        // 项目详情
        findProjectById(data) {
            findProjectById(data).then((res) => {
                this.projectdetail = res.data;
               console.log(this.projectdetail.fileinfo)
            });
        },
        // 下载文件
        downloadfile(id,name){
            console.log(id)
            let data={
                fileid:id
            }
            download(data).then(res=>{
                const link = document.createElement('a');
                let blob = new Blob([res]);
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name; 
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
            })
        }
    },
    mounted(){
         let data = {
            id: this.$route.params.id
        };
        this.findProjectById(data);
    }
};
</script>
<style>
</style>
<style scoped>
.container {
    overflow: hidden;
}
.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}
.indexTitle {
    margin-bottom: 20px;
}
.contentsize {
    font-size: 18px;
    font-weight: 700;
}
.handle-box {
    overflow: hidden;
}
.addtitle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.buttonCenter {
    width: 12%;
    margin: auto;
}
.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}
/* 按钮 */
.searchcolor {
    background-color: #7090ff;
}
.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}
/* 项目文件 */
.filebox{
     text-align: center;
     margin-right:10px;
     cursor: pointer;
}
.filebox:hover .fileboxitem{
    color: #7090ff;
}
</style>